<template>
  <div class="address-content">
    <div class="address-box flex jc-sa">
      <div class="list-box flex ai-c" v-for="(item,index) in list" :key="index" :class="{'active':index == selIndex }" @click="selAddressClick(index,item)">
        <div class="flex flex-d jc-c flex-1">
          <div class="flex jc-sb">
            <div class="name">{{ item.name }}</div>
            <div class="phone">{{ item.phone }}</div>
          </div>
          <div class="address">{{item.province+item.city+item.region+item.detailAddress }}</div>
        </div>
<!--        <i class="el-icon-edit" @click.stop="edit(index)"></i>-->
      </div>
<!--      <div class="list-box flex jc-c ai-c">-->
<!--        <i class="add el-icon-plus" @click="add"></i>-->
<!--      </div>-->
    </div>
    <!-- 编辑 -->
    <el-dialog title="修改地址" :visible.sync="dialogVisible" width="40%">
      <div class="exit-content">
        <el-form ref="form" :model="exitForm" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="exitForm.name"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="exitForm.phone"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="exitForm.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>

</template>

<script>
export default {
  data() {
    return {
      selIndex: 0,
      dialogVisible: false,
      exitForm: {
        name: "",
        phone: "",
        address: ""
      },
    }
  },
  props:['list'],
  methods: {
    selAddressClick(index,item) {
      // window.console.log(item)
      this.emitAddressId(item.id);
      this.selIndex = index;
    },
    edit(index) {
      console.log(index);
      this.dialogVisible = true;
    },
    save() {
      this.dialogVisible = false;
    },
    add() {
      this.dialogVisible = true;
    },
    emitAddressId(addressId){
      this.$emit('pushIdToOrder',addressId)
    }
  },
}
</script>

<style lang="scss" scoped>
.address-box {
  padding: 20px 16px;
  flex-wrap: wrap;
}
.list-box {
  width: 30%;
  height: 86px;
  text-align: left;
  padding: 0 16px;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  box-sizing: border-box;
  margin-bottom: 16px;
  cursor: pointer;

  &.active {
    border-color: #e69090;
  }

  .name {
    font-size: 16px;
  }
  .phone {
    font-size: 14px;
    color: #898989;
  }
  .address {
    font-size: 14px;
  }

  .el-icon-edit {
    font-size: 20px;
    margin-left: 10px;
    color: #6a94f5;
  }

  .add {
    font-size: 30px;
  }

}
</style>